<template>
  <footer>
    <div class="w">
      <div class="title">
        <div class="item">
          <i></i>&nbsp;&nbsp;<span>品类齐全，轻松购物</span>
        </div>
        <div class="item">
          <i></i>&nbsp;&nbsp;<span>多仓直发，极速配送</span>
        </div>
        <div class="item">
          <i></i>&nbsp;&nbsp;<span>正品行货，精致服务</span>
        </div>
        <div class="item">
          <i></i>&nbsp;&nbsp;<span>天天低价，畅选无忧</span>
        </div>
      </div>
    </div>
    <div class="br"></div>
    <div class="w bor">
      <ul class="ul-1">
        <li class="item">
          <dl>
            <dt>购物指南</dt>
            <dd><a href="javascript:;">购物流程</a></dd>
            <dd><a href="javascript:;">会员介绍</a></dd>
            <dd><a href="javascript:;">生活旅行</a></dd>
            <dd><a href="javascript:;">常见问题</a></dd>
            <dd><a href="javascript:;">大家电</a></dd>
            <dd><a href="javascript:;">联系客服</a></dd>
          </dl>
        </li>
        <li class="item">
          <dl>
            <dt>配送方式</dt>
            <dd><a href="javascript:;">上门自提</a></dd>
            <dd><a href="javascript:;">211限时达</a></dd>
            <dd><a href="javascript:;">配送服务查询</a></dd>
            <dd><a href="javascript:;">配送费收取标准</a></dd>
            <dd><a href="javascript:;">海外配送</a></dd>
          </dl>
        </li>
        <li class="item">
          <dl>
            <dt>支付方式</dt>
            <dd><a href="javascript:;">货到付款</a></dd>
            <dd><a href="javascript:;">在线支付</a></dd>
            <dd><a href="javascript:;">分期付款</a></dd>
            <dd><a href="javascript:;">公司转账</a></dd>
          </dl>
        </li>
        <li class="item">
          <dl>
            <dt>售后服务</dt>
            <dd><a href="javascript:;">售后政策</a></dd>
            <dd><a href="javascript:;">价格保护</a></dd>
            <dd><a href="javascript:;">退款说明</a></dd>
            <dd><a href="javascript:;">返修/退换货</a></dd>
            <dd><a href="javascript:;">取消订单</a></dd>
          </dl>
        </li>
        <li class="item">
          <dl>
            <dt>特色服务</dt>
            <dd><a href="javascript:;">夺宝岛</a></dd>
            <dd><a href="javascript:;">DIY装机</a></dd>
            <dd><a href="javascript:;">延保服务</a></dd>
            <dd><a href="javascript:;">京东E卡</a></dd>
            <dd><a href="javascript:;">京东通信</a></dd>
            <dd><a href="javascript:;">京鱼座智能</a></dd>
          </dl>
        </li>
        <li class="items">
          <dl>
            <dt>京东自营覆盖区县</dt>
            <dd>
              京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。
            </dd>
            <a href="https://help.jd.com/user/issue/103-983.html"
              >查看详情<i class="icon-angle-right"></i
            ></a>
          </dl>
        </li>
      </ul>
    </div>
    <div class="w">
      <div class="ul-2">
        <a href="javascript:;">关于我们</a>|<a href="javascript:;">联系我们</a
        >|<a href="javascript:;">联系客服</a>|<a href="javascript:;">合作招商</a
        >|<a href="javascript:;">商家帮助</a>|<a href="javascript:;">营销中心</a
        >|<a href="javascript:;">手机京东</a>|<a href="javascript:;">友情链接</a
        >|<a href="javascript:;">销售联盟</a>|<a href="javascript:;">京东社区</a
        >|<a href="javascript:;">风险监测</a>|<a href="javascript:;">隐私政策</a
        >|<a href="javascript:;">京东公益</a>|<a href="javascript:;"
          >English Site</a
        >|<a href="javascript:;">Media & IR</a>
      </div>
      <p>
        <a href="javascript:;">京公网安备 11000002000088号</a> |
        <a href="javascript:;">京ICP备11041704号</a> |
        <a href="javascript:;"
          >互联网药品信息服务资格证编号(京)-经营性-2014-0008</a
        >
        |
        <a>&nbsp;新出发京零 字第大120007号</a>
      </p>
      <p>
        <a href="javascript:;">互联网出版许可证编号新出网证(京)字150号</a> |
        <a href="javascript:;"
          >出版物经营许可证|网络文化经营许可证京网文[2020]6112-1201号</a
        >
        | &nbsp;违法和不良信息举报电话：4006561155
      </p>
      <p>
        Copyright © 2004 - 2021 京东JD.com 版权所有&nbsp; |&nbsp;
        消费者维权热线：4006067733&nbsp; |
        <a href="javascript">经营证照|(京)网械平台备字(2018)第00003号</a> |
        <a href="javascript">营业执照</a>
      </p>
      <p>
        <a href="javascript:;"><i></i> Global Site</a> |
        <a href="javascript:;"><i></i> Сайт России</a> |
        <a href="javascript:;"><i></i> Situs Indonesia</a> |
        <a href="javascript:;"><i></i> Sitio de España</a> |
        <a href="javascript:;"><i></i> เว็บไซต์ประเทศไทย</a>
      </p>
      <p>
        京东旗下网站：<a href="javascript:;">京东钱包</a>|
        <a href="">京东云</a>
      </p>
      <div class="dibu">
        <a href="#" class="a1"> </a>
        <a href="#" class="a2"> </a>
        <a href="#" class="a3"> </a>
        <a href="#" class="a4"> </a>
        <a href="#" class="a5"> </a>
        <a href="#" class="a6"> </a>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: "HomeFooter",
};
</script>

<style lang="scss" scoped>
footer {
  width: 100%;
  height: 518px;
}

footer .title {
  width: 100%;
  height: 42px;
  margin-top: 30px;
  margin-bottom: 30px;
}

footer .title i {
  display: inline-block;
  width: 36px;
  height: 42px;
  vertical-align: middle;
  background-image: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/23f3ddf914b1b527d0429a3d713cfe3a.png);
}

footer .title .item:nth-child(1) i {
  background-position: 0 -192px;
}

footer .title .item:nth-child(2) i {
  background-position: -41px -192px;
}

footer .title .item:nth-child(3) i {
  background-position: -82px -192px;
}

footer .title .item:nth-child(4) i {
  background-position: -123px -192px;
}

footer .title .item {
  width: 25%;
  float: left;
  text-align: center;
  line-height: 42px;
  font-size: 18px;
  font-weight: bold;
  color: #444;
}

footer .w {
  height: auto;
}

footer .br {
  width: 100%;
  height: 1px;
  background: #dedede;
}

footer .ul-1 {
  width: 100%;
  height: 200px;
}

footer .ul-1 li {
  margin-top: 25px;
  width: calc(20% - 40px);
  float: left;
  color: #666;
  font-size: 12px;
}

footer .ul-1 dd {
  height: 22px;
  line-height: 22px;
}

footer .ul-1 li dt {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 10px;
}

footer .ul-1 .items {
  width: 200px;
  position: relative;
}

footer .ul-1 .items dt {
  text-align: center;
}

footer .ul-1 .items dd {
  padding: 0 10px;
}

footer .ul-1 .items a {
  position: absolute;
  top: 96px;
  right: 2px;
}

footer .bor {
  border-bottom: 1px solid #dedede;
}

footer .ul-2 {
  font-size: 12px;
  color: #666;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 10px;
}

footer .ul-2 a {
  margin: 0 10px;
}

footer p {
  text-align: center;
  color: #999;
  font-size: 12px;
}

footer p a {
  margin: 0 4px;
  line-height: 22px;
}

footer a:hover {
  color: #c81623 !important;
}

footer p a i {
  position: relative;
  top: 2px;
  display: inline-block;
  width: 15px;
  height: 12px;
  background-image: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/23f3ddf914b1b527d0429a3d713cfe3a.png);
  margin-right: 3px;
}

footer p a:nth-child(1) i {
  background-position: -108px -155px;
}

footer p a:nth-child(2) i {
  background-position: -168px -155px;
}

footer p a:nth-child(3) i {
  background-position: -148px -155px;
}

footer p a:nth-child(4) i {
  background-position: -128px -155px;
}

footer p a:nth-child(5) i {
  background-position: -108px -172px;
}

.dibu {
  margin: 20px auto;
  text-align: center;
}

.dibu a {
  display: inline-block;
  width: 103px;
  height: 32px;
  font-size: 12px;
  overflow: hidden;
  color: #666;
  margin: 0 3px;
  background-image: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/23f3ddf914b1b527d0429a3d713cfe3a.png);
  background-repeat: no-repeat;
}

.dibu .a1 {
  background-position: -205px -111px;
}

.dibu .a2 {
  background-position: -205px -74px;
}

.dibu .a3 {
  background-position: -205px -37px;
}

.dibu .a4 {
  background-image: url();
  background-position: 0 -66px;
}

.dibu .a5 {
  background-position: 0 -155px;
}

.dibu .a6 {
  background-image: url();
  background-position: 0 -99px;
}

@media screen and (max-width: 1380px) {
  footer .ul-2 a {
    margin: 0 6px;
  }
}
</style>
